<template>
  <div class="record-item flex-col-center">
<!--    内容-->
    <div class="record-item-letter" :style="{'color':computedLetterColor}">
      {{computedText}}
    </div>
<!--    状态：对、错-->
    <div class="record-item-status flex-row-center">
      <el-icon :color="computedStatusColor" :size="iconSize">
        <CircleCheck  v-show="item.status === RecordStatus.SUCCESS" />
        <CircleClose v-show="item.status === RecordStatus.ERROR" />
      </el-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
import {computed, defineProps} from "vue"
import {RecordItem, RecordStatus} from "@/ts/record";
import {CircleCheck, CircleClose} from "@element-plus/icons";
let specialCharMap=new Map([
  [" ","□"],
  ["\n","⏎"]
])

const props=defineProps<{
    item:RecordItem
  }>()

  let iconSize=20
  let computedStatusColor=computed(()=>{
    switch (props.item.status){
      case RecordStatus.VOID:return ''
      case RecordStatus.SUCCESS:return 'green'
      case RecordStatus.ERROR:return 'red'
    }
    return ''
  })
  let computedLetterColor=computed(()=>{
    switch (props.item.status){
      case RecordStatus.VOID:return 'gray'
      case RecordStatus.SUCCESS:return 'green'
      case RecordStatus.ERROR:return 'red'
    }
    return ''
  })

 let computedText=computed(()=>{
   let value = props.item.value;
   return specialCharMap.has(value)?specialCharMap.get(value):value
 })
</script>

<style scoped lang="less">
  .record-item{
    padding: 5px;
      .record-item-letter{
        font-size: 35px;
        min-height: 1em;
      }
    .record-item-status{

    }
  }
</style>